<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UBBC 监控面板</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <script src="https://cdn.jsdelivr.net/npm/plotly.js@2.27.0/dist/plotly.min.js"></script>
</head>
<body>
    <div class="container">
        <!-- 侧边栏导航 -->
        <nav class="sidebar">
            <div class="logo">
                <h2>UBBC</h2>
                <p>监控面板</p>
            </div>
            <ul class="nav-menu">
                <li class="nav-item active" onclick="showTab('dashboard')">
                    <span class="nav-icon">📊</span>
                    监控仪表盘
                </li>
                <li class="nav-item" onclick="showTab('rules')">
                    <span class="nav-icon">📋</span>
                    规则管理
                </li>
                <li class="nav-item" onclick="showTab('logs')">
                    <span class="nav-icon">📄</span>
                    日志查看
                </li>
            </ul>
        </nav>

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- Tab 内容 -->
            <div id="dashboard" class="tab-content active">
                <h1>监控仪表盘</h1>
                <div class="dashboard-grid">
                    <div class="metric-card">
                        <h3>系统状态</h3>
                        <div class="status-indicator">
                            <span class="status-dot online"></span>
                            运行正常
                        </div>
                    </div>
                    <div class="metric-card">
                        <h3>处理统计</h3>
                        <div class="metric-value">{{ total_requests|default(0) }}</div>
                        <div class="metric-label">总请求数</div>
                    </div>
                    <div class="metric-card">
                        <h3>违规检测</h3>
                        <div class="metric-value violations">{{ violations_count|default(0) }}</div>
                        <div class="metric-label">违规内容</div>
                    </div>
                </div>

                <!-- 图表区域 -->
                <div class="chart-container">
                    <h2>系统性能图表</h2>
                    <div id="performance-chart"></div>
                </div>
            </div>

            <div id="rules" class="tab-content">
                <h1>规则管理</h1>
                <div class="rules-section">
                    <button class="btn-primary" onclick="loadRules()">加载规则</button>
                    <button class="btn-secondary" onclick="addRule()">添加规则</button>
                    <div id="rules-list" class="rules-list">
                        <!-- 规则列表将在这里动态加载 -->
                    </div>
                </div>
            </div>

            <div id="logs" class="tab-content">
                <h1>日志查看</h1>
                <div class="logs-section">
                    <div class="search-bar">
                        <input type="text" id="log-search" placeholder="搜索日志..." onkeyup="filterLogs()">
                        <button class="btn-primary" onclick="refreshLogs()">刷新</button>
                    </div>
                    <div id="logs-container" class="logs-container">
                        <!-- 日志内容将在这里动态加载 -->
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 模态框 -->
    <div id="modal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal()">&times;</span>
            <h2 id="modal-title">提示</h2>
            <p id="modal-message"></p>
            <button class="btn-primary" onclick="closeModal()">确定</button>
        </div>
    </div>

    <script src="/static/js/main.js"></script>
</body>
</html>
